<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="timer"></div>
    <button id="btn">清除</button>
</body>
<script>
    /*
    在页面上生成动态时钟 2021-10-19 11:48:30
    setInterval
    */
    function identify(num){
       return num<10?"0"+num:num;
   }
    function createTimer(){
        var date1=new Date();
        var mi=date1.getMilliseconds();
        var year=date1.getFullYear();
        var month=date1.getMonth()+1;
        var day =date1.getDate();
        var hour =date1.getHours();
        var minute=date1.getMinutes();
        var sec=date1.getSeconds();
        month=identify(month);
        day=identify(day);
        hour=identify(hour);
        minute=identify(minute);
        sec=identify(sec);
        var result=year+"-"+month+"-"+day+" "+hour+":"+minute+":"+sec;
        return result;
   }
        var timerId=setInterval(function(){
            var result=createTimer();
            var timer=document.getElementById("timer");
            timer.innerHTML=result;

        },1000)
   
    // var timerId=setInterval(function(){
    //     while(sec=00;sec<58){
    //         sec=sec+1;
    //         document.write(year+"-"+month+"-"+day+" "+hour+":"+minute+":"+sec+"<br/>");
    //     }
        
    // },1000)
        btn.onclick=function(){
            clearInterval(timerId);
        }
</script>
</html>